<template>
  <view class="collapse-content">
    <view>
      <view>电压：</view>
      <view>{{ data.gyVoltage | empty }}</view>
    </view>
    <view>
      <view>电流：</view>
      <view>{{ data.gyElectric | empty }}</view>
    </view>
    <view>
      <view>负荷：</view>
      <view>{{ data.gyLoad | empty }}</view>
    </view>
    <view>
      <view>10KV功率因数：</view>
      <view>{{ data.gyPowerFactor | empty }}</view>
    </view>
    <view>
      <view>共开高压电机：</view>
      <view>{{ data.gyMotorsNumber | empty }}</view>
    </view>
  </view>
</template>
<script>
import dayjs from 'dayjs'
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  filters: {
    empty(val) {
      return val || '--'
    },
  },
}
</script>
<style lang="scss" scoped>
.collapse-content {
  background: #fff;
  padding-left: 30rpx;
  width: 100%;
  box-sizing: border-box;

  & > view {
    padding: 24rpx 0;
    width: 100%;
    display: flex;
    align-items: flex-start;
    font-size: 28rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    border-bottom: 1rpx solid #d5d7e3;

    & view:first-child {
      text-align: right;
    }

    & view:last-child {
      flex: 1;
      word-break: break-all;
      color: #666666;
    }
  }

  & > view:last-child {
    border: 0;
  }
}

.flex-column {
  flex-direction: column;

  & view:first-child {
    width: 100%;
    text-align: left !important;
    margin-bottom: 20rpx;
  }
}
</style>
